<template>
    <div class="crane" :style="crane.craneClass" @click="goOverLook">
        <aside class="info" :style="crane.info" v-if="isShowInfo">
            <div class="device">
                <span>{{ crane.weight }}T</span>
                <template v-if="crane.state">
                    <span class="online">在线</span>
                </template>
                <template v-else>
                    <span class="offline">离线</span>
                </template>
            </div>
            <div class="info-item">
                <span>大车位置</span>
                <span>{{ crane.currentPosition || 0 }}m</span>
            </div>
            <div class="info-item">
                <span>当前总量</span>
                <span>{{ crane.currentWeight || 0 }}t</span>
            </div>
        </aside>
        <img class="top-car" :src="crane.topCar" :width="crane.topCar.width" :height="crane.topCar.height" :style="crane.topCarClass" />
        <img class="bottom-car" :src="crane.bottomCar" :width="crane.bottomCar.width" :height="crane.bottomCar.height" :style="crane.bottomCarClass" />
    </div>
</template>

<script setup>
const props = defineProps({
    crane: {
        type: Object,
        required: true
    },
    isShowInfo: {
        type: Boolean,
        default: true
    }
});

const emits = defineEmits(["goOverLook"]);
const goOverLook = () => {
    emits("goOverLook");
};
</script>

<style lang="scss" scoped>
.crane {
    position: absolute;
    transition: all 2.5s ease-in-out;
    cursor: pointer;
    .info {
        position: absolute;
        top: 53px;
        box-sizing: border-box;
        padding: 16px;
        width: 156px;
        height: 110px;
        background: linear-gradient(180deg, rgba(62, 167, 222, 0.1) 0%, rgba(62, 167, 222, 0.1) 100%);
        z-index: 99;
        .device {
            display: flex;
            font-size: 14px;
            span {
                &:first-of-type {
                    font-size: 16px;
                    font-weight: 600;
                    &::before {
                        content: "";
                        display: inline-block;
                        margin-right: 4px;
                        width: 4px;
                        height: 15px;
                        background: #4ba6dd;
                        border-radius: 2px;
                    }
                }
            }
            .online {
                margin-left: 4px;
                width: 36px;
                height: 17px;
                background-color: #3b7c59;
                color: #7be16e;
                line-height: 17px;
                text-align: center;
            }
            .offline {
                margin-left: 4px;
                width: 36px;
                height: 17px;
                background-color: rgba(255, 87, 89, 0.4);
                color: #ff5759;
                line-height: 17px;
                text-align: center;
            }
        }
        .info-item {
            margin-top: 8px;
            span {
                &:last-of-type {
                    margin-left: 8px;
                }
            }
        }
    }
    .top-car,
    .bottom-car {
        position: absolute;
        z-index: 1;
        transition: all 2.5s ease-in-out;
    }
}
</style>
